<template>
  <div
    ref="floatingPanel"
    class="floating-panel"
    :style="{
      height: `${height}px`
    }"
  >
    <div
      v-if="canDrag"
      class="floating-panel__header"
      @touchstart="startDrag"
      @touchmove="handleMoving"
      @touchend="handleTouchEnd"
    >
      <div class="floating-panel__header-bar" />
    </div>

    <div class="close-icon" @click="handleClose">
      <i class="el-icon-close" />
    </div>

    <div
      class="floating-panel__content"
      :style="{
        height: canDrag ? 'calc(100% - 30px)' : '100%'
      }"
    >
      <slot />
    </div>
  </div>
</template>
<script>
export default {
  name: 'FloatingPanel',
  props: {
    height: {
      type: Number,
      default: 0
    },

    anchors: {
      type: Array,
      default: () => [100, window.innerWidth * 0.6]
    },

    canDrag: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      isDragging: false,
      panelHeight: 0,
      startPanelHeight: 0, // 拖拽调整开始时的高度
      startY: 0,
      panelPosition: { y: 0 }
    }
  },
  computed: {
    minHeight() {
      return Math.min(...this.anchors)
    },

    maxHeight() {
      return Math.max(...this.anchors)
    }
  },
  watch: {

  },
  methods: {
    startDrag(e) {
      if (!this.canDrag) return
      this.isDragging = true
      this.startY = e.touches[0].clientY
      this.startPanelHeight = this.height
    },

    handleMoving(e) {
      if (!this.canDrag) return
      if (!this.isDragging) return

      const currentY = e.touches[0].clientY
      const deltaY = currentY - this.startY // 手指移动的偏移量

      // 向上拖（currentY < startY） => deltaY 为负 => 高度增加
      // 向下拖（currentY > startY） => deltaY 为正 => 高度减少
      const newHeight = this.startPanelHeight - deltaY

      this.panelHeight = Math.max(this.minHeight - 10, Math.min(newHeight, this.maxHeight + 10))

      this.$emit('heightChange', this.panelHeight)
    },

    handleTouchEnd(e) {
      if (!this.canDrag) return
      if (this.isDragging) {
        this.isDragging = false
        if (!this.anchors || this.anchors.length === 0) return

        const targetHeight = this.findNearestSnapPoint(this.panelHeight, this.anchors)
        this.panelHeight = targetHeight
        this.$emit('heightChangeEnd', targetHeight)
      }
    },

    findNearestSnapPoint(currentHeight, anchors) {
      let anchor = anchors[0]
      let minDiff = Math.abs(anchor - currentHeight)

      for (let i = 1; i < anchors.length; i++) {
        const diff = Math.abs(anchors[i] - currentHeight)
        if (diff < minDiff) {
          minDiff = diff
          anchor = anchors[i]
        }
      }
      console.log('anchor --------->', anchor)
      return anchor
    },

    handleClose() {
      this.panelHeight = 0
      this.$emit('heightChangeEnd', 0)
    }
  }
}
</script>
<style lang="scss" scoped>
.floating-panel {
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;

  &__header {
    position: relative;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    &-bar {
      width: 35px;
      height: 3px;
      background-color: rgb(200, 201, 204);
      border-radius: 20px;
    }
  }

  .close-icon {
    position: absolute;
    right: 10px;
    top: 8px;
  }

  &__content {
    height: calc(100% - 30px);
  }
}
</style>
